<template>
    <div>
        <div class="box">
            <div class="toubu">
                <div class="toubu_s">
                    <div class="toubu_i">
                        <van-icon name="search" class="toubu_img" />
                        <input type="password" placeholder="请输入商品名称" class="toubu_in">
                    </div>
                    <div class="toubu_qx">取消</div>
                </div>
                <div class="toubu_zb">
                    <div class="toubu_zb_wb">历史记录</div>
                    <van-icon name="delete-o" />
                </div>
                <div class="toubu_db">
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                </div>
            </div>
            <div class="dibu">
                <div class="dibu_wb">热门搜索</div>
                <div class="dibu_dibu">
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                    <van-button color="#aaa" type="primary" size="mini">沙发</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
.box{
    width: 100%;
    height: 100vh;
    background-color: #eee;
    .toubu{
        width: 100%;
        height: 3.8667rem;
        background-color: white;
        .toubu_s{
            display: flex;
            justify-content:space-between;
            .toubu_i{
                width: 7.7333rem;
                height: .7467rem;
                background-color: #f4f4f4;
                margin: .1333rem .2667rem;
                display: flex;
                align-items:center
                .toubu_img{
                    width: .3733rem;
                    height: .3733rem;
                    margin-right: .2133rem;
                }
                .toubu_in{
                    width: 6.9333rem;
                    font-size: .28rem;
                    margin: 0 auto;
                    line-height: .7467rem;
                    background-color: transparent;
                    border: none;
                }
            }
            .toubu_qx{
                font-size: .28rem;
                text-align: center;
                line-height:1.1467rem;
                margin-right: 20px;
            }
        }
        .toubu_zb{
            display: flex;
            justify-content: space-between;
            margin: .4267rem  .2667rem;
            .toubu_zb_wb{
                font-size: .3733rem;
                color: #aaa;
            }
        }
        .toubu_db{
            margin: -10px 20px
        }
    }
    .dibu{
        width: 100%;
        height: 4.88rem;
        background-color: white;
        margin:10px 0;
        padding: 0 .2667rem;
        .dibu_wb{
            height: 1.2rem;
            font-size: .3733rem;
            line-height: 45px;
            color: #aaa;
        }
        .dibu_dibu{
            margin: 10px;
        }
    }
}
</style>